<div class="content__title">
    <h1>File Upload</h1>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="6">
        <nz-card>
            <ng-template #title>Select files</ng-template>
            <ng-template #body>
                <div ng2FileDrop [ngClass]="{'bg-grey-lighter': hasBaseDropZoneOver}" (fileOver)="fileOverBase($event)" [uploader]="uploader"
                    class="box-placeholder">
                    Base drop zone
                </div>
                <div ng2FileDrop [ngClass]="{'bg-grey-lighter': hasAnotherDropZoneOver}" (fileOver)="fileOverAnother($event)" [uploader]="uploader"
                    class="box-placeholder">
                    Another drop zone
                </div>
                <h3 class="text-md">Upload options</h3>
                <button nz-button class="ant-btn__block file-upload mt-sm">
                    <input id="file1" accept type="file" ng2FileSelect [uploader]="uploader" multiple />
                    <i class="anticon anticon-upload"></i><span>Multiple</span>
                </button>
                <button nz-button class="ant-btn__block file-upload mt-sm">
                    <input id="file1" accept type="file" ng2FileSelect [uploader]="uploader" />
                    <i class="anticon anticon-upload"></i><span>Single</span>
                </button>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzMd]="18">
        <div nz-row>
            <div nz-col [nzSpan]="24">
                <nz-card>
                    <ng-template #title>Upload queue</ng-template>
                    <ng-template #body>
                        <nz-table #nzTable [nzDataSource]="files" [nzCustomNoResult]="true" [nzIsPagination]="false">
                            <div noResult>Please choose file to upload.</div>
                            <thead nz-thead>
                                <tr>
                                    <th nz-th><span>Name</span></th>
                                    <th nz-th><span>Size</span></th>
                                    <th nz-th><span>Progress</span></th>
                                    <th nz-th><span>Status</span></th>
                                    <th nz-th><span>Actions</span></th>
                                </tr>
                            </thead>
                            <tbody nz-tbody>
                                <tr nz-tbody-tr *ngFor="let item of nzTable.data">
                                    <td nz-td><strong>{{ item?.file?.name }}</strong></td>
                                    <td nz-td *ngIf="uploader.options.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
                                    <td nz-td *ngIf="uploader.options.isHTML5">
                                        <nz-progress [ngModel]="item.progress" [nzStrokeWidth]="5"></nz-progress>
                                    </td>
                                    <td nz-td class="text-center">
                                        <span *ngIf="item.isSuccess"><nz-tag [nzColor]="'green'"></nz-tag></span>
                                        <span *ngIf="item.isCancel" class="mr-md"><nz-tag [nzColor]="'orange'"></nz-tag></span>
                                        <span *ngIf="item.isError"><nz-tag [nzColor]="'red'"></nz-tag></span>
                                    </td>
                                    <td nz-td nowrap>
                                        <nz-button-group>
                                            <button nz-button (click)="item.upload()" [nzType]="'primary'" [disabled]="item.isReady || item.isUploading || item.isSuccess">
                                                <i class="anticon anticon-upload"></i>
                                            </button>
                                            <button nz-button (click)="item.cancel()" [disabled]="!item.isUploading">
                                                <i class="anticon anticon-close"></i>
                                            </button>
                                            <button nz-button (click)="item.remove()">
                                                <i class="anticon anticon-delete"></i>
                                            </button>
                                        </nz-button-group>
                                    </td>
                                </tr>
                            </tbody>
                        </nz-table>
                    </ng-template>
                </nz-card>
            </div>
        </div>
        <div nz-row>
            <div nz-col [nzSpan]="24">
                <nz-card>
                    <ng-template #body>
                        <nz-progress [ngModel]="uploader.progress" [nzStrokeWidth]="5"></nz-progress>
                        <nz-button-group class="mt-md d-block">
                            <button nz-button (click)="uploader.uploadAll()" [nzType]="'primary'" [nzLoading]="uploader.isUploading" [disabled]="!uploader.getNotUploadedItems().length">
                                <i class="anticon anticon-upload"></i><span>Upload All</span>
                            </button>
                            <button nz-button (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
                                <i class="anticon anticon-close"></i><span>Cancel All</span>
                            </button>
                            <button nz-button (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
                                <i class="anticon anticon-delete"></i><span>Remove All</span>
                            </button>
                        </nz-button-group>
                    </ng-template>
                </nz-card>
            </div>
        </div>
    </div>
</div>
